<template>
  <el-collapse-item name="3">
    <template #title>
      <h2>屏幕</h2>
    </template>
    <div v-if="config?.server && config.server?.user_lcd_config">
      <h3>显示</h3>
      <el-switch
        v-model="config.server.user_lcd_config.enable"
        size="large"
        active-text="开启"
        inactive-text="关闭"
      />
      <br />
      <el-text style="padding-right: 10px">屏保时间:</el-text>
      <el-input-number
        v-model="config.server.user_lcd_config.saver_time"
        style="width: 50%"
        :precision="0"
        :step="1"
        :min="10"
      >
        <template #suffix>
          <span>秒</span>
        </template>
      </el-input-number>
      <br />
      <div v-if="config.server.user_lcd_config.enable">
        <el-divider></el-divider>
        <h3>亮度</h3>
        <el-slider
          v-model="config.server.user_lcd_config.brightness"
          :marks="lcd_bri_marks"
          :min="bri_range[0]"
          :max="bri_range[1]"
          style="width: 80%; margin: auto"
        />
        <el-divider></el-divider>
        <h3>亮度范围</h3>
        <el-slider
          v-model="lcd_bri_range"
          range
          show-stops
          :marks="lcd_bri_range_marks"
          @change="lcd_bri_range_change"
          :max="100"
          style="width: 80%; margin: auto"
        />
      </div>
      <h5></h5>
      <el-button
        type="primary"
        style="margin-top: 10px; width: 90%"
        :loading="server_api.ticks?.lcd_update_config > 0"
        :disabled="!change"
        @click="server_api.lcd_update_config(config.server.user_lcd_config)"
      >
        保存
      </el-button>
    </div>
  </el-collapse-item>
</template>
<script setup lang="ts">
import store from "~/utils/store";
import server_api from "~/utils/server_api";
import type { CSSProperties } from "vue";
const config = toRef(store);
const lcd_bri_range = ref([0, 100]);
const bri_range = ref([0, 100]);
const change = computed(() => {
  return (
    JSON.stringify(config.value.server.lcd_config) !=
    JSON.stringify(config.value.server.user_lcd_config)
  );
});
interface Mark {
  style: CSSProperties;
  label: string;
}
type Marks = Record<number, Mark | string>;
const lcd_bri_marks = ref<Marks>({
  0: "0%",
  100: "100%",
});
const lcd_bri_range_marks = reactive<Marks>({
  0: "0%",
  25: "25%",
  50: "50%",
  75: "75%",
  100: "100%",
});
const lcd_bri_range_change = (value: Array<number>) => {
  config.value.server.user_lcd_config.min = value[0];
  config.value.server.user_lcd_config.max = value[1];
  bri_range.value = value;
  lcd_bri_marks.value = {};
  lcd_bri_marks.value[value[0]] = value[0] + "%";
  lcd_bri_marks.value[value[1]] = value[1] + "%";
};
</script>
<style scoped></style>
